<template>
    <div class="account-page">
        <div class="page-line">
            <div class="cell-title">个人资料</div>
        </div>

        <div class="line-group">
            <div class="line-title line-required">用户名</div>
            <div class="line-input">
                <el-input v-model="form.nickname" placeholder="请输入用户名" />
            </div>
        </div>

        <div class="line-group">
            <div class="line-title line-required">所属行业</div>
            <div class="line-input">
                <el-cascader
                    v-model="form.industry_id"
                    :options="industryList"
                    :props="{
                        value: 'id',
                        label: 'name',
                        children: 'child',
                    }"
                    v-if="industryList.length"
                ></el-cascader>
            </div>
        </div>

        <div class="line-group">
            <div class="line-title line-required">所在地</div>
            <div class="line-input">
                <el-cascader
                    :options="regionData"
                    :props="{ value: 'label' }"
                    v-model="form.city"
                    style="width: 100%"
                >
                </el-cascader>
            </div>
        </div>

        <div class="line-group">
            <div class="line-title">密码</div>
            <div class="line-input">
                <el-input type="password" value="******" readonly />

                <div class="btn-update__text" @click="onUpdatePassword">
                    修改
                </div>
            </div>
        </div>

        <div class="line-group">
            <div class="line-title">手机绑定</div>
            <div class="line-input">
                <el-input :value="mobile" readonly />

                <div class="btn-update__text" @click="onUpdatePhone">修改</div>
            </div>
        </div>

        <div class="line-group">
            <div class="line-title line-required">性别</div>
            <div class="line-input">
                <el-select v-model="form.gender" style="width: 100%">
                    <el-option label="男" :value="1"></el-option>
                    <el-option label="女" :value="0"></el-option>
                </el-select>
            </div>
        </div>

        <div class="line-group">
            <div class="line-title line-required">出生日期</div>
            <div class="line-input">
                <el-date-picker
                    v-model="form.birthday"
                    type="date"
                    class="no-icon"
                    :prefix-icon="false"
                    :clearable="false"
                    placeholder="请选择出生日期"
                    :disabledDate="birthdayDisabled"
                    value-format="YYYY-MM-DD"
                ></el-date-picker>
            </div>
        </div>

        <div class="line-group">
            <div class="line-title">个性签名：</div>
            <div class="line-input">
                <el-input type="text" v-model="form.personal_ignature" />
            </div>
        </div>

        <div class="line-group">
            <div class="line-title">爱好</div>
            <div class="line-input">
                <div class="form-content">
                    <el-input
                        type="textarea"
                        v-model="form.hobby"
                        :rows="2"
                        :autosize="{ minRows: 2, maxRows: 4 }"
                    />
                </div>
            </div>
        </div>

        <div class="form-footer">
            <el-button type="primary" @click="onSubmit">修改</el-button>
        </div>
    </div>

    <DialogUpdatePhoneM ref="updatePhoneDialogRef" />
</template>
<script setup>
import { regionData } from "element-china-area-data";
import { useContent } from ".";
import { useMobile } from "@/hooks";

const mobile = useMobile();

const {
    form,
    industryList,
    updatePhoneDialogRef,
    birthdayDisabled,
    onGetList,
    onGetUserInfo,
    onSubmit,
    onUpdatePassword,
    onUpdatePhone,
} = useContent();

onMounted(() => {
    onGetList();
    onGetUserInfo();
});
</script>
<style lang="scss">
.m-body .el-scrollbar.el-cascader-menu {
    min-width: 120px;
    width: 120px;
}
</style>
<style lang="scss" scoped>
.account-page {
    padding: 0 15px;
}

.page-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 15px;
}

.cell-title {
    position: relative;
    color: #5085fb;
    font-size: 14px;
    padding-left: 8px;
    font-weight: 500;

    &::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
        width: 3px;
        height: 13px;
        border-radius: 20px;
        background-color: #5085fb;
        transform: translateY(-50%);
    }
}

.line-group {
    margin-top: 20px;

    .line-title {
        font-size: 14px;
        margin-bottom: 10px;
        color: #333333;
        font-weight: 600;
    }

    .line-required {
        position: relative;

        &::after {
            content: "*";
            color: #ff4941;
            font-weight: bold;
            margin-left: 2px;
        }
    }

    .line-input {
        position: relative;

        :deep(.el-cascader) {
            width: 100%;
        }

        :deep(.el-input) {
            height: 45px;

            .el-input__wrapper {
                box-shadow: none !important;
                user-select: none;
            }
        }

        .btn-update__text {
            position: absolute;
            top: 50%;
            right: 16px;
            transform: translateY(-50%);
            color: #5085fb;
            font-size: 14px;
        }
    }
}

.form-footer {
    text-align: center;
    padding: 15px;
}

:deep(.no-icon) {
    width: 100%;
    .el-input__prefix {
        display: none !important;
    }
}
</style>
